import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";
import GiftedListView from "react-native-gifted-listview";
import Util from "../../main/Util";
/**
 * Created by huotaol on 2017/6/13.
 */
export default class HelpCollectList extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._onFetch = this._onFetch.bind(this);
        this._renderRowView = this._renderRowView.bind(this);
    }

    render() {
        return (
            <View style={{paddingBottom: CustomStyle.getActualSizeInVertical(16), flex: 1}}>
                <ModuleCommonHeader title={'其他帮看信息'}/>
                <GiftedListView
                    rowView={this._renderRowView}
                    onFetch={this._onFetch}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    renderSeparator={this._renderSeparator}
                    renderHeader={this._renderSeparator}
                    paginationFetchigView={this._renderPaginationFetchigView}
                    paginationAllLoadedView={this._renderPaginationAllLoadedView}
                    paginationWaitingView={this._renderPaginationWaitingView}
                />
            </View>
        );
    }

    _onFetch(page = 1, callback, options) {
        const param = {
            page,
            pagesize: MAX,
        };
        Util.postServer('/user/querybkcarslist', param, result => {
            const {data} = result;
            const imagePrefix = data['256picurl'];
            const pagebean = data.pagebean.list;
            const list = pagebean.map(item => {
                item.logourl = imagePrefix + item.logourl;
                return item;
            });
            callback(list, {allLoaded: list.length === 0});
        }, msg => {
            Util.showToast(msg);
        });
    }

    _renderRowView(item) {
        return <View style={{
            paddingLeft: CustomStyle.getActualSizeInHorizontal(30),
            paddingRight: CustomStyle.getActualSizeInHorizontal(30),
        }}>
            <View style={{height: CustomStyle.getActualSizeInVertical(88), justifyContent: 'center'}}>
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(26),
                        color: '#4a3d18',
                    }]}>{item.title}</Text>
            </View>
            <View style={[CustomStyle.separator]}/>
            <View
                style={{
                    flexDirection: 'row',
                    height: CustomStyle.getActualSizeInVertical(200),
                    paddingTop: CustomStyle.getActualSizeInVertical(20),
                    paddingBottom: CustomStyle.getActualSizeInVertical(20),
                }}>
                <Image source={{uri: item.logourl}}
                       resizeMode={'contain'}
                       style={{
                           width: CustomStyle.getActualSizeInHorizontal(240),
                           height: CustomStyle.getActualSizeInVertical(160),
                       }}/>
                <View style={{justifyContent: 'space-between', flex: 1,}}>
                    <ShowText name={'表显里程数：'} value={item.travelkilometer}/>
                    <ShowText name={'车身颜色：'} value={item.bodycolor}/>
                    <ShowText name={'VIN码：'} value={this._processVIN(item.vehiclevincode)}/>
                </View>
            </View>
        </View>
    }

    _renderSeparator() {
        return <View style={{height: CustomStyle.getActualSizeInVertical(20), backgroundColor: '#fffcee'}}/>
    }

    _processVIN(vin) {
        return vin.substring(0, 3) + '*****' + vin.substring(8);
    }

    /**
     * Render the pagination view when waiting for touch
     * @param {function} paginateCallback The function to call to load more rows
     */
    _renderPaginationWaitingView(paginateCallback) {
        return (
            <TouchableOpacity
                onPress={paginateCallback}
                style={{backgroundColor: '#f6f6f6', height: CustomStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: CustomStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: CustomStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: CustomStyle.getActualFontSize(32)
                }}>点击加载更多.</Text>
            </TouchableOpacity>
        );
    }

    /**
     * Render the pagination view when fetching
     */
    _renderPaginationFetchigView() {
        return (
            <View
                style={{backgroundColor: '#f6f6f6', height: CustomStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: CustomStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: CustomStyle.getActualSizeInVertical(20),
                    color: '#ddd'
                }}>加载中..</Text>
            </View>
        );
    }

    /**
     * Render the pagination view when end of list is reached
     */
    _renderPaginationAllLoadedView() {
        return (
            <View
                style={{backgroundColor: '#f6f6f6', height: CustomStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: CustomStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: CustomStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: CustomStyle.getActualFontSize(32)
                }}>没有更多车辆啦...</Text>
            </View>
        );
    }
}

class ShowText extends Component {
    static propTypes = {
        name: PropTypes.string,
        value: PropTypes.value,
    };

    render() {
        return (
            <View style={[...this.props, {
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
            }]}>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(26),
                    color: '#857e6e',
                }]}>{this.props.name}</Text>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(26),
                    color: '#4a3d18',
                }]}>{this.props.value}</Text>
            </View>
        );
    }
}


const MAX = 20;

